<template>
  <div style="line-height: 24px;letter-spacing: 1px;">
    <div v-for="(item,index) in infoData" :key="index">
      <div style="display:flex;padding-bottom: 10px;">
        <div style="width:120px;font-weight:bold;flex-shrink:0;padding-left: 4px">第{{ item.dayNum }}天</div>
        <div style="width:100%;border-bottom: 1px solid #fafafa; padding-bottom: 4px">
          <span style="font-weight: bold;">区间：</span>{{ item.areaRegion }}
          <span style="font-weight: bold;margin-left: 20px">住宿：</span>{{ item.stay }}
          <span style="font-weight: bold;margin-left: 20px">用餐：</span>{{ item.eating }}
        </div>
      </div>
      <div style="border-bottom: 1px solid #fafafa;margin-bottom: 10px;padding-bottom: 4px;">
        <div style="margin-left: 120px;">
          <span style="font-weight: bold;">交通：</span>
          {{ item.trafic }}
        </div>
      </div>
      <div style="border-bottom: 2px solid #fafafa;margin-bottom: 10px;padding-bottom: 10px;">
        <div
          style="margin-left: 120px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; line-break: anywhere;" v-html="item.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "plan",
  props: {
    infoData: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>
